<template>
  <div class="containerBox">
    <button class="back" v-show="!menuS" @click="back">返回</button>
    <div class="shopHome" v-show="menuS">
      <el-row :gutter="15">
        <el-col :span="7">
          <div class="grid-content tab1">
            <p class="h3">皇家官方旗舰店</p>
            <p>用户名：皇家</p>
            <p>手机号：13372510921</p>
            <p>对公账号：6217****3000****995</p>
            <p>对公支付宝账号：13372510921</p>
            <router-link class="editB nav-active" :to="{name: 'edit'}" @click.native="menuS = false">编辑资料</router-link>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content center tab2">
            <p class="h3">当前可提现金额</p>
            <p>10000元</p>
            <p><router-link class="editB nav-active" :to="{name: 'runningDetail'}" @click.native="menuS = false">查看流水明细</router-link></p>
            <button class="hover" @click="cashVisible = true">提现</button>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content center tab3">
            <p class="h3">总营业额</p>
            <p><span>20000</span>元</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content center tab3">
            <p class="h3">冻结金额</p>
            <p><span>10000</span>元</p>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content center tab3">
            <p class="h3">保证金</p>
            <p><span>20000</span>元</p>
          </div>
        </el-col>
      </el-row>
      <div class="table shop">
        <p>店铺及商品提示</p>
        <ul>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
        </ul>
      </div>
      <div class="table order">
        <p>订单</p>
        <ul>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
          <li>
            <span>200</span>
            <p>在售商品</p>
          </li>
        </ul>
      </div>
      <div class="echars">
        <div class="mod-demo-echarts">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card>
                <div id="J_chartLineBox" class="chart-box"></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog
        title="提现"
        :visible.sync="cashVisible"
        class="cashVisible"
        width="800px"
      >
        <p>提现金额 <input type="text" v-model="cashAmount"> 元<a>全部金额</a></p>
        <p>提现支付宝账号 123456789@qq.com</p>
        <div>
          <button class="hover" @click="withdrawal">确定</button>
          <button class="hover" @click="cashVisible = false">取消</button>
        </div>
      </el-dialog>
    </div>
    <router-view v-show="!menuS"></router-view>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'shopHome',
  data () {
    return {
      menuS: true,
      cashVisible: false,
      cashAmount: ''
    }
  },
  mounted () {
    console.log(1)
    this.initChartLine()
  },
  methods: {
    back () {
      this.$router.go(-1)
      this.menuS = true
    },
    withdrawal () {
      if (this.cashAmount) {
        this.$message('你点击了提现按钮')
      } else {
        this.$message('提现金额为0不能提现')
      }
    },
    // 折线图
    initChartLine () {
      var option = {
        'title': {
          'text': '折线图堆叠'
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '邮件营销',
            'type': 'line',
            'stack': '总量',
            'data': [ 120, 132, 101, 134, 90, 230, 210 ]
          },
          {
            'name': '联盟广告',
            'type': 'line',
            'stack': '总量',
            'data': [ 220, 182, 191, 234, 290, 330, 310 ]
          },
          {
            'name': '视频广告',
            'type': 'line',
            'stack': '总量',
            'data': [ 150, 232, 201, 154, 190, 330, 410 ]
          },
          {
            'name': '直接访问',
            'type': 'line',
            'stack': '总量',
            'data': [ 320, 332, 301, 334, 390, 330, 320 ]
          },
          {
            'name': '搜索引擎',
            'type': 'line',
            'stack': '总量',
            'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ]
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style scoped lang="less">
  .el-col {
    .grid-content{
      padding:20px 30px;
      border-radius: 10px;
      background: #fff !important;
      text-align: center;
      font-size:16px;
      p.h3{
        line-height:40px;
        font-size: 26px;
        margin-bottom: 10px;
      }
      .editB{
        margin-top:10px;
      }
    }
    .grid-content.tab1 {
      text-align: right;
      p.h3{
        text-align: left;
      }
      p{
        line-height:35px;
        text-align: left;
      }
    }
    .grid-content.tab2{
      p.h3{
        margin-top:10px;
      }
      p{
        font-size:24px;
        line-height:40px;
        a{
          font-size:16px;
        }
      }
      button{
        line-height:45px;
        width:125px;
        background: #ffe2c2;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        margin-top: 15px;
        font-weight: bold;
      }
    }
    .grid-content.tab3{
      .h3{
        margin-top:66px;
      }
      p span{
        font-size: 26px;
        margin-bottom: 66px;
        margin-right:10px;
      }
    }
  }
  .table{
    background: #fff;
    padding:20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top:30px;
    > p{
      font-size:22px;
      margin-bottom: 20px;
    }
    ul li span{
      width: 100%;
      font-size:26px;
    }
    ul li span,ul li p{
      text-align: center;
      line-height:40px;
    }

  }
  .shop{
    ul li{
      width:19%;
    }
    ul li:nth-child(3){
      border-right: 1px solid #6f6f6f;
    }
  }
  .order{
    ul li{
      width: 16%;
    }
  }
  .echars{
    margin-top:30px;
    .mod-demo-echarts .el-row .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .chart-box {
      min-height: 400px;
    }
    .el-card{
      background: #fff;
    }
  }
  .el-dialog{
    input{
      border: 1px solid #e5e5e5;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      margin: 0 10px;
      padding:0 10px;
      width:100px;
      line-height:30px;
    }
    a{
      margin-left:20px;
    }
    p{
      line-height:40px;
    }
    div{
      text-align: center;
      margin-top:30px;
      button{
        padding:0 10px;
        line-height:35px;
        background: #008fff;
        color:#fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin:0 10px;
      }
    }
  }

</style>
